<template>
    <el-main>
        <div v-show="isShow" style="height:100%;">
        <!-- 主页部分 -->
            <!-- mian的头部 -->
        <div class="main-top">
            <div class="top1">
                <div class="top1-tip">
                    <span>消防水监测系统</span>
                    <div class="refresh" @click="refresh">
                        <i class="iconfont icon-refresh"></i>
                        <span>刷新</span>
                    </div>
                </div>
                <div class="top1-time">
                    <p><span>数据更新时间：</span><span>{{time()}}</span></p>
                </div>
            </div>
            <div class="top2">
              <div class="top2-icon"><i class="iconfont icon-equipment"></i></div>
              <div class="top2-tip">
                  <span>全部设备</span>
                  <p>{{fmTotal}}</p>
              </div>
          </div>
          <div class="top2">
              <div class="top2-icon"><i class="iconfont icon-normal"></i></div>
              <div class="top2-tip">
                  <span>正常</span>
                  <p>{{fmStatus.正常}}</p>
              </div>
          </div>
          <div class="top2">
              <div class="top2-icon"><i class="iconfont icon-alarm"></i></div>
              <div class="top2-tip">
                  <span>报警</span>
                  <p>{{fmStatus.告警}}</p>
              </div>
          </div>
          <div class="top2">
              <div class="top2-icon"><i class="iconfont icon-fault"></i></div>
              <div class="top2-tip">
                  <span>故障</span>
                  <p>{{fmStatus.故障}}</p>
              </div>
          </div>
          <div class="top2">
              <div class="top2-icon"><i class="iconfont icon-offline"></i></div>
              <div class="top2-tip">
                  <span>离线</span>
                  <p>{{fmStatus.离线}}</p>
              </div>
          </div>
        </div>
        <!-- main的主要部分 -->
        <div class="main-banner">
            <div class="search-box">
                <div>设备编号：<el-input v-model="inquire.deviceNo" placeholder="请输入内容"></el-input></div>
                <div>设备名称：<el-input v-model="inquire.deviceName" placeholder="请输入内容"></el-input></div>
                <div>设备类型：
                    <el-select v-model="inquire.deviceType" placeholder="请选择">
                        <el-option
                        v-for="item in deviceType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                        </el-option>
                    </el-select>
                </div>
                <div>设备状态：
                    <el-select v-model="inquire.status" placeholder="请选择">
                        <el-option
                        v-for="item in deviceStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                        </el-option>
                    </el-select>
                </div>
                <div class="inp-btn">
                    <div class="btn" @click="fmSearch">
                            <i class="iconfont icon-search"></i>
                        <span>查询</span>
                    </div>
                    <div class="btn" @click="fmReset">
                            <i class="iconfont icon-reset"></i>
                        <span>重置</span>
                    </div>
                </div>
            </div>
            <div class="btn-box">
                <div class="btn" @click="addBox1" v-has="'add'">
                        <i class="iconfont icon-add"></i>
                    <span>添加</span>
                </div>
                <div class="btn">
                        <i class="iconfont icon-disable"></i>
                    <span>禁用</span>
                </div>
                <div class="btn">
                        <i class="iconfont icon-enable"></i>
                    <span>启用</span>
                </div>
                <div class="btn" @click="fmDel" v-has="'del'">
                        <i class="iconfont icon-delete"></i>
                    <span>删除</span>
                </div>
            </div>
            <div class="list-box">
                <el-table
                    ref="multipleTable"
                    :data="fmTable"
                    border
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="fmGetId">
                    <el-table-column
                    type="selection"
                    width="55"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="id"
                    label="序号"
                    width="60">
                    </el-table-column>
                    <el-table-column
                    prop="deviceNo"
                    label="设备编号"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="deviceName"
                    label="设备名称"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="deviceType"
                    label="设备类型"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="iccid"
                    label="ICCID"
                    width="140">
                    </el-table-column>
                    <el-table-column
                    prop="voltage"
                    label="电压"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="waterPressure"
                    label="水压"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="waterLevel"
                    label="水位"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="department"
                    label="所属部门"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="installAddr"
                    label="安装位置"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="safetyDir"
                    label="消防安全责任人"
                    width="110">
                    </el-table-column>
                    <el-table-column
                    prop="dirNum"
                    label="责任人电话"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="status"
                    label="设备状态"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button @click="editBox1(scope.row)" type="text" size="small" v-has="'edit'">编辑</el-button>
                        <el-button @click="fmDetail(scope.row)" type="text" size="small">详情</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="list-bottom">
                <el-pagination
                @size-change="fmCurrentCount"
                @current-change="fmCurrentPage"
                :current-page="currentPage1"
                :page-sizes="[5,10,15,20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="fmTotal"
                >
                </el-pagination>
            </div>
        </div>
        <!-- 遮罩层 -->
        <div class="mask" v-if="isShow1"></div>
        <!-- 增加和编辑弹出框 -->
        <div class="addBox" v-if="isShow2">
            <el-header style="height: 50px;">
                <span>新增设备</span>
                <i class="iconfont icon-x" @click="addDisappear" ></i>
            </el-header>
            <el-main>
                <p class="add-tip">基础信息</p>
                <div class="inp-box">
                    <div class="inp">
                        <p>
                            <span class="symbol">*</span>
                            <span>设备编号：</span>
                        </p>
                        <el-input v-model="add.deviceNo" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="inp">
                        <p>
                            <span class="symbol">*</span>
                            <span>设备名称：</span>
                        </p>
                        <el-input v-model="add.deviceName" placeholder="请输入内容"></el-input>
                    </div>
                </div>
                <div class="inp-box">
                    <div class="inp">
                        <p>
                            <span class="symbol">*</span>
                            <span>设备类型：</span>
                        </p>
                        <el-select v-model="add.deviceType" placeholder="请选择">
                            <el-option
                            v-for="item in deviceType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="inp">
                        <p>
                            <span class="symbol">*</span>
                            <span>设备状态：</span>
                        </p>
                        <el-select v-model="add.status" placeholder="请选择">
                          <el-option
                          v-for="item in deviceStatus"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label">
                          </el-option>
                      </el-select>
                    </div>
                </div>
                <div class="inp-box">
                    <div class="inp">
                        <p>
                            <span class="symbol">*</span>
                            <span>ICCID：</span>
                        </p>
                        <el-input v-model="add.iccid" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="inp">
                        <p>
                            <span class="symbol">*</span>
                            <span>电压：</span>
                        </p>
                        <el-input v-model="add.voltage" placeholder="请输入内容"></el-input>
                    </div>
                </div>
                <div class="inp-box">
                    <div class="inp">
                        <p>
                            <span class="symbol">*</span>
                            <span>水压：</span>
                        </p>
                        <el-input v-model="add.waterPressure" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="inp">
                        <p>
                            <span class="symbol">*</span>
                            <span>水位：</span>
                        </p>
                        <el-input v-model="add.waterLevel" placeholder="请输入内容"></el-input>
                    </div>
                </div>
                <p class="add-tip">消防安全责任人</p>
                <div class="responsible-person">
                    <div class="rp-top">
                        <div class="rpt-l">第一责任人</div>
                        <div class="rpt-r"><i class="iconfont icon-add"></i></div>
                    </div>
                    <div class="rp-btm">
                        <p>
                            <span class="symbol">*</span>
                            <span>责任人：</span>
                            <el-input v-model="add.safetyDir" placeholder="请输入内容"></el-input>
                        </p>
                        <p>
                            <span class="symbol">*</span>
                            <span>电话：</span>
                            <el-input v-model="add.dirNum" placeholder="请输入内容"></el-input>
                        </p>
                    </div>
                </div>
                <p class="add-tip">安装位置</p>
                <div class="install-box">
                    <p>
                        <span class="symbol">*</span>
                        <span>安装点位：</span>
                        <span class="inp-explain">设备安装点位由所属部门+安装位置描述两部分构成</span>
                    </p>
                    <div class="inp-box">
                        <div class="inp">
                            <el-select v-model="add.department" placeholder="请选择">
                                <el-option
                                v-for="item in department"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                                </el-option>
                            </el-select>
                        </div>
                        <p>-</p>
                        <div class="inp">
                            <el-input v-model="add.installAddr" placeholder="请输入内容"></el-input>
                        </div>
                    </div>
                </div>
                <div class="add-btn">
                    <div class="btn" @click="addDisappear">
                      <i class="iconfont icon-return"></i>
                        <span>取消</span>
                    </div>
                    <div class="btn" @click="addSave">
                      <i class="iconfont icon-save"></i>
                        <span>保存</span>
                    </div>
                </div>
            </el-main>
        </div>
        </div>
        <!-- 详情页面 -->
        <fireWaterDetail v-if="isShow4" @detailFn="detailFn(arguments)" :fmId="fmId" :detailNum="detailNum" ></fireWaterDetail>
    </el-main>
  </template>
    
  
  <script>
  import fireWaterDetail from '@/components/fireDetection/fireWaterDetail.vue';
  
    export default {
      components:{fireWaterDetail},
      data() {
        return {
          addNum:'',
          editNum:'',
          activeName: 'first',
          currentPage1: 1,
          fmTotal:1,
          fmPage:1,
          fmCount:5,
          isShow:true,
          isShow1:false,
          isShow2:false,
          isShow3:false,
          isShow4:false,
          isShow5:false,
          fmnSwitch:true,
          disabled:false,
          input:'',
          value1:'111',
          fmTable: [],
          fmId:'',
          detailNum:'',
          add:{
            "camera": "",
            "commCycle": 0,
            "department": "",
            "deviceName": "",
            "deviceNo": "",
            "deviceType": "",
            "dirNum": "",
            "iccid": "",
            "id": 0,
            "installAddr": "",
            "lowVoltageWarning": 0,
            "overVoltageWarning": 0,
            "safetyDir": "",
            "status": "",
            "voltage": "",
            "warningType": "",
            "waterLevel": "",
            "waterPressure": ""
          },
          inquire:{
              "deviceNo": "",
              "deviceName": "",
              "deviceType": "",
              "status": "",
          },
          // 删除的id
         fmDelId:[],
         //  状态
         fmStatus:{},
         // fm选择框 
         deviceType:[
         {value:1,label: '消防水压表'},
         {value:2,label: '消防水液位采集终端'},
         ], 
         deviceStatus:[
         {value:1,label: '正常'},
         {value:2,label: '报警'},
         {value:3,label: '故障'},
         {value:4,label: '离线'},
         {value:5,label: '启动'},
         {value:6,label: '禁用'},
         {value:7,label: ''},
         ],
          //   fm中添加中的选择
          department:[
              {value:1,label: '综合办公楼'},
              {value:2,label: '产线厂房'},
              {value:3,label: '仓储楼'},
              {value:4,label: '活动中心'},
          ],
          placeName:[
              {value:1,label: '场所01'},
              {value:2,label: '场所02'},
              {value:3,label: '场所03'},
          ],
        };
      },
      mounted:function(){
          this.fmRender();
      },
      methods: {
        // 时间
        time(){
            return new Date().toLocaleString();
        },
          // 分页部分
          fmCurrentCount(val) {
              console.log(`每页 ${val} 条`);
              this.fmCount=val;
              this.fmRender();
          },
          fmCurrentPage(val) {
              this.fmPage=val;
              this.fmRender();
          },
          clean(){
            this.add={
                "camera": "",
                "commCycle": 0,
                "department": "",
                "deviceName": "",
                "deviceNo": "",
                "deviceType": "",
                "dirNum": "",
                "iccid": "",
                "id": 0,
                "installAddr": "",
                "lowVoltageWarning": 0,
                "overVoltageWarning": 0,
                "safetyDir": "",
                "status": "",
                "voltage": "",
                "warningType": "",
                "waterLevel": "",
                "waterPressure": ""
            }
          },
          // 增加框出现
          addBox1(){
              this.isShow1=true;
              this.isShow2=true;
              this.disabled=false;
              this.addNum=1;
          },
          // 增加框消失
          addDisappear(){
              this.isShow1=false;
              this.isShow2=false;
              this.isShow3=false;
              this.clean();
          },
          // 编辑框出现
          editBox1(v){
              this.isShow1=true;
              this.isShow2=true;
              this.disabled=true;
              this.addNum=3;
              this.add={
                "camera": v.camera,
                "department": v.department,
                "deviceName": v.deviceName,
                "deviceNo": v.deviceNo,
                "deviceType": v.deviceType,
                "dirNum": v.dirNum,
                "id": v.id,
                "installAddr": v.installAddr,
                "safetyDir": v.safetyDir,
                "status": v.status,
                "commCycle": v.commCycle,
                "iccid": v.iccid,
                "lowVoltageWarning": v.lowVoltageWarning,
                "overVoltageWarning": v.overVoltageWarning,
                "voltage": v.voltage,
                "warningType": v.warningType,
                "waterLevel": v.waterLevel,
                "waterPressure": v.waterPressure
            }
          },
          // 增加和编辑确认
          addSave(){
              if(this.addNum==1){
                  this.$axios({
                  url:'/fireWater',
                  method:'post',
                  data:this.add
                  }).then((res)=>{
                      // 查看搜索框内容
                      console.log(res.data.msg);
                      if(res.data.msg=='success'){
                          this.clean();
                          this.addDisappear();
                          this.fmRender();
                          this.$message.success('添加成功!');
                    }else {
                        this.$message.error("添加失败！");
                    }
                  })
              }else if(this.addNum==3){
                  this.$axios({
                      url:'/fireWaters',
                      method:'PUT',
                      data:this.add
                  }).then((res)=>{
                      // 查看搜索框内容
                      console.log(res.data.msg);
                      if(res.data.msg=='success'){
                          this.addDisappear();
                          this.fmRender();
                          this.$message.success('编辑成功!');
                        }else {
                            this.$message.error("编辑失败！");
                        }
                  })
              }
          },
          // 渲染
          fmRender(){
              this.$axios({
                  url:`/fireWaters/${this.fmPage}/${this.fmCount}`,
                  method:'get'
              }).then((res)=>{
                  // 查看搜索框内容
                  console.log(res.data.msg);
                  if(res.data.msg=='success'){
                      this.fmTable=res.data.data;
                      // this.fmTable=fmTableAll.slice((this.fmPage-1)*this.fmCount,this.fmPage*this.fmCount);
                      this.fmTotal=res.data.total;
                  }else {
                    this.$message.error("数据加载失败！");
                }
              });
              this.$axios({
                url:'/fireWater/count',
                method:'get'
             }).then((res)=>{
                console.log(res.data.msg);
                if(res.data.msg=='success'){
                    this.fmStatus=res.data.data;
                }
             })
          },
          // 重置部分
          fmReset(){
              this.inquire={
              "deviceNo": "",
              "deviceName": "",
              "deviceType": "",
              "status": ""
              }
              // this.fmPage=1;
              this.fmRender();
          },
          refresh(){
              this.inquire={
              "deviceNo": "",
              "deviceName": "",
              "deviceType": "",
              "status": ""
              };
              this.fmRender();
          },
          // 搜索部分
          fmSearch(){
              this.$axios({
                  url:`/queryFireWaterByCondition/${this.fmPage}/${this.fmCount}`,
                  method:'get',
                  params:this.inquire
              }).then((res)=>{
                  // 查看搜索框内容
                  console.log(res.data.msg);
                  if(res.data.msg=='success'){
                      this.fmTable=res.data.data;
                      this.fmTotal=res.data.total;
                  }else {
                    this.$message.error("数据加载失败！");
                }
              })
          },
          // 删除部分
          fmGetId(val){
              this.fmDelId=[];
              for (let key in val) {
                  this.fmDelId[key]=val[key].id;
              }
          },
          fmDel(){
              this.$axios({
                  url:'/fireWaters',
                  method:'delete',
                  data:this.fmDelId
              }).then((res)=>{
                  // 查看搜索框内容
                  console.log(res.data.msg);
                  if(res.data.msg=='success'){
                      this.fmRender();
                      this.$message.success('删除成功!');
                    }else {
                        this.$message.error("删除失败！");
                    }
              })
          },
         fmDetail(v){
              this.isShow4=true;
              this.isShow=false;
              this.fmId=v.id;
              this.detailNum=1;
          },
          detailFn(v){
              this.isShow4=v[1];
              this.isShow=v[0];
          },
          
      }
    }
    </script>
    
  <style scoped lang="less">
      .el-main {
          background-color: #E9EEF3;
          color: #333;
          text-align: center;
          line-height: 160px;
          padding:20px 0px 0px 0px;
          position:relative;
          height: 100%;
      }
  
  // 主页页面
      // 头部
      .main-top{
          width: 100%;
          height: 80px;
          background: #E9EEF3;
          margin-bottom: 20px;
          display: flex;
          justify-content: space-between;
      }
  .top1{
      width: 380px;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #fff;
      padding-left: 20px;
  }
  .top1-tip{
      width: 100%;
      height: 40px;
      font-size: 16px;
      font-weight: 700;
      line-height: 40px;
      text-align: start;
      display: flex;
  }
  .refresh{
          width: 95px;
          height: 30px;
          border: 1px solid #f2f2f2;
          border-radius: 3px;
          margin-left: 100px;
          margin-top: 10px;
          font-size: 14px;
          font-weight:500;
          display: flex;
          align-items: center;
          justify-content: space-around;
          &:hover{
              cursor: pointer;
              color: #fff;
              background: #1890ff;
              .iconfont{
                  color: #fff;
              }
          }
          .iconfont{
              color: #1890ff;
              
          }
      }
  .top1-time{
      width: 100%;
      height: 40px;
      font-size: 12px;
      line-height: 40px;
      text-align: start;
      
  }
  .top2{
      width: 200px;
      height: 100%;
      background: #fff;
      line-height: 80px;
      display: flex;
      .top2-icon{
          width: 100px;
          .iconfont{
              font-size: 36px;
              border-radius: 3px;
          }
          .icon-equipment{
              color: #fff;
              background: #1890ff;
          }
          .icon-normal{
              color: #00e266;
          }
          .icon-alarm{
              color: #d4321c;
          }
          .icon-fault{
              color: #fff;
              background: #ec9d26;
          }
          .icon-offline{
              color: #fff;
              background: #cccccc;
          }
      }
      .top2-tip{
          flex: 1;
          height: 100%;
          line-height: 20px;
          text-align: center;;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          span{
              font-size: 14px;
          }
          p{
              font-size: 18px;
              font-weight: 700;
          }
      }
  }
      // 中间部分
      .main-banner{
          padding: 0px 20px;
          height: calc(100% - 100px);
          background: #fff;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
      }
      /deep/.el-tabs__header{
          line-height: 50px;
          height: 50px;
      }
  
      .search-box{
          height: 60px;
          display: flex;
          line-height: 30px;
          align-items: center;
          justify-content: space-between;
          font-size: 12px;
          .el-input{
              width: 160px;
              height: 30px;
              /deep/.el-input__inner{
                  width: 160px;
                  height: 30px;
              }
              
          }
          .el-select{
              /deep/.el-input--suffix{
                  width: 160px;
                  height: 30px;
              }
              /deep/.el-input__inner{
                  width: 160px;
                  height: 30px;
              }
              /deep/.el-input__icon{
                  line-height: 30px;
              }
          }
          .inp-btn{
              width: 200px;
              display: flex;
              justify-content: space-around;
              .btn{
                  width: 80px;
                  height: 30px;
                  border: 1px solid #f2f2f2;
                  border-radius: 3px;
                  line-height: 30px;
                  font-size: 12px;
                  display: flex;
                  justify-content: space-around;
                  border-radius: 5px;
                  &:hover{
                      cursor: pointer;
                      color: #fff;
                      background: #1890ff;
                      .iconfont{
                          color: #fff;
                      }
                  }
                  .iconfont{
                      color: #1890ff;
                      
                  }
              }
          }
      }
      /deep/.el-table{
          color:#333;
          font-size:12px;
      }
      .btn-box{
          height: 60px;
          display: flex;
          line-height: 60px;
          align-items: center;
          .btn{
              width: 80px;
              height: 35px;
              border: 1px solid #f2f2f2;
              line-height: 35px;
              font-size: 14px;
              display: flex;
              justify-content: space-around;
              margin-right: 20px;
              border-radius: 3px;
              &:hover{
                  cursor: pointer;
                  color: #fff;
                  background: #1890ff;
                  .iconfont{
                  color: #fff;
                      }
                  }
              .iconfont{
                  color: #1890ff;
                  
              }
          }
      }
      .list-box{
          height: 380px;
          line-height: 40px;
          overflow:scroll;
          overflow-x:hidden;
      }
      .list-bottom{
              line-height: 50px;
              height: 50px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top:50px;
          }
  
  
  // 遮罩层
  .mask{
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      background:rgba(0, 0, 0, 0.5);
      filter: opacity(60%);
      opacity: 60%;
      z-index: 3;
  }
          
  // 弹出框
  .addBox{
      width: 720px;
      height: 770px;
      background: #fff;
      position:absolute;
      top: 0px;
      left: 240px;
      z-index: 4;
      .el-header{
          height: 30px;
          line-height: 30px;
          background: #f2f2f2;
          font-weight: 700;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      .el-main{
          background: #fff;
          height: 740px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          line-height: 50px;
          padding: 0px 20px;
          .add-tip{
              font-weight: 700;
          }
          .inp-box{
              width: 100%;
              height: 70px;
              display: flex;
              font-size: 14px;
              display: flex;
              justify-content: space-between;
              .inp{
                  width: 300px;
                  height: 70px;
                  line-height: 35px;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  .symbol{
                      color: red;
                  }
                  .el-input{
                      width: 300px;
                      height: 30px;
                      /deep/.el-input__inner{
                          width: 300px;
                          height: 30px;
                      }
                      
                  }
                  .el-select{
                      /deep/.el-input--suffix{
                          width: 300px;
                          height: 30px;
                      }
                      /deep/.el-input__inner{
                          width: 300px;
                          height: 30px;
                      }
                      /deep/.el-input__icon{
                          line-height: 30px;
                      }
                  }
  
              }
          }
          .responsible-person{
              width: 660px;
              height: 114px;
              line-height: 20px;
              border-left:1px solid #d7d7d7 ;
              border-bottom:1px solid #d7d7d7 ;
              border-radius: 3px;
              .rp-top{
                  height: 40px;
                  line-height: 44px;
                  display: flex;
                  .rpt-l{
                      width: 120px;
                      border-top: 1px solid #d7d7d7;
                      border-left: 1px solid #d7d7d7;
                      border-radius: 3px;
                  }
                  .rpt-r{
                      flex: 1;
                      border-left:1px solid #d7d7d7 ;
                      border-bottom:1px solid #d7d7d7 ;
                      border-radius: 3px;
                      display:flex;
                      .iconfont{
                          margin-left: 10px;
                          font-size: 24px;
                          color:#1890ff;
                      }
                  }
              }
              .rp-btm{
                  height: 70px;
                  line-height: 70px;
                  display: flex;
                  font-size: 14px;
                  justify-content: space-evenly;
                  border-right:1px solid #d7d7d7 ;
                  border-radius: 3px;
                  p{
                      display: flex;
                      // justify-content: space-around;
                      .symbol{
                          color: red;
                      }
                      .el-input{
                      width: 200px;
                      height: 30px;
                          /deep/.el-input__inner{
                              width: 200px;
                              height: 30px;
                          }
                      }
                  }
                  
              }
          }
          
      }
      
  }
  .install-box{
      width: 100%;
      height: 70px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p{
          height: 30px;
          line-height: 30px;
          display: flex;
          .symbol{
              color: red;
          }
          .inp-explain{
              font-size: 14px;
              color: #7f7f7f;
          }
      }
      .inp-box{
          height: 40px;
          // line-height: 50px;
          .inp{
          width: 300px;
          height: 40px;
          line-height: 35px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          
          .el-input{
              width: 300px;
              height: 30px;
              /deep/.el-input__inner{
                  width: 300px;
                  height: 30px;
              }
              
          }
          .el-select{
              /deep/.el-input--suffix{
                  width: 300px;
                  height: 30px;
              }
              /deep/.el-input__inner{
                  width: 300px;
                  height: 30px;
              }
              /deep/.el-input__icon{
                  line-height: 30px;
              }
          }
  
      }
      }
      
  }
  .icon-x{
      cursor: pointer;
  }
  .add-btn{
      width:100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .btn{
          width: 80px;
          height: 35px;
          border: 1px solid #f2f2f2;
          border-radius: 3px;
          line-height: 35px;
          font-size: 14px;
          display: flex;
          justify-content: space-around;
          margin-right: 20px;
          &:hover{
              cursor: pointer;
              color: #fff;
              background: #1890ff;
              .iconfont{
                  color: #fff;
              }
          }
          .iconfont{
              color: #1890ff;
              
          }
      }
  }
  
  </style>